import 'package:dala_flutter/dala/components/circleContainer.dart';
import 'package:dala_flutter/dala/components/menu_drawer.dart';
import 'package:dala_flutter/dala/components/storage_box.dart';
import 'package:flutter_swiper_view/flutter_swiper_view.dart';
import 'package:flutter/material.dart';

class CirclePage extends StatefulWidget {
  const CirclePage({super.key});

  @override
  State<CirclePage> createState() => _CirclePageState();
}

class _CirclePageState extends State<CirclePage> {
  bool _isStorageBoxOpen = false; // 是否打开收纳盒
  // 菜单抽屉的标签数据
  final List<Tag> _menuItems = [
    Tag(name: "足球", categoryId: 40000),
    Tag(name: "篮球", categoryId: 40001),
    Tag(name: "搭子", categoryId: 40002),
    Tag(name: "羽毛球", categoryId: 40003),
    Tag(name: "易烊千玺", categoryId: 40004),
  ];

  @override
  void initState() {
    super.initState();
  }

  double centerAreaHeight = 0.0;

  @override
  Widget build(BuildContext context) {
    var mediaQuery = MediaQuery.of(context); // 获取屏幕尺寸信息
    var topPadding = mediaQuery.padding.top; // 获取刘海的顶部安全区域
    var mediaWidth = mediaQuery.size.width; // 获取屏幕宽度
    var mediaHeight = mediaQuery.size.height; //获取屏幕高度
    double appBarHeight = 60.0; // 这个高度是自己给的 appBar也不是内置的那个而是使用Container代替的
    double bottomNavigationBar = 77.0;  // bottomNavigationBar 高度为77 通过GlobalKey得到的
    var swiperWidth = mediaWidth - 20; //Swiper宽度
    var swiperHeight = mediaHeight - topPadding - appBarHeight - bottomNavigationBar; //Swiper高度
    CustomLayoutOption option = CustomLayoutOption(startIndex: 0);
    option
        .addTranslate(List.generate(10, (index) => Offset(-index * 50.0, 0.0)));
    // print(swiperHeight);
    // print(swiperWidth);

    return Scaffold(
      body: Padding(
        padding: EdgeInsets.fromLTRB(0, topPadding, 0, 0),
        child: Column(
          children: [
            Container(
              padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
              height: appBarHeight,
              width: mediaWidth,
              child: Row(
                // 将行中的两个组件放在两边
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  MenuDrawer(data: _menuItems),
                  SizedBox(
                    child: Row(
                      children: [
                        IconButton(
                          onPressed: () {},
                          icon: const Icon(Icons.search),
                        ),
                        IconButton(
                          onPressed: () {
                            setState(() {
                              _isStorageBoxOpen = !_isStorageBoxOpen;
                            });
                          },
                          icon: const Icon(Icons.label),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            // 中间高度自适应
            _isStorageBoxOpen
                ? const StorageBox()
                : Swiper(
                    itemWidth: swiperWidth,
                    itemHeight: swiperHeight,
                    loop: false,
                    scrollDirection: Axis.horizontal,
                    axisDirection: AxisDirection.left,
                    index: 2,
                    autoplay: false,
                    viewportFraction: 0.8,
                    itemCount: 10,
                    layout: SwiperLayout.STACK,
                    customLayoutOption: option,
                    itemBuilder: (context, index) {
                      return circleContainer(
                        swiperHeight: swiperHeight,
                        swiperWidth: swiperWidth,
                      );
                    },
                  ),
          ],
        ),
      ),
    );
  }
}
